<template>
  <button @click="fadeInOut">显示/隐藏</button>
  <transition name="fade">
      <h2 v-if="isShow">{{ msg }}</h2>
  </transition>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
export default {
    setup () {
        const state = reactive({
            isShow: true,
            msg: 'Hello Vue 3.0 World!'
        })

        const fadeInOut = () => {
            state.isShow = !state.isShow
        }

        return {
            ...toRefs(state),
            fadeInOut
        }
    }
}
</script>

<style scoped>
.fade-enter-active {
    transition: all 0.3s ease-out;
}

.fade-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.fade-enter-from, fade-leave-to {
    transform: translateX(20px);
    opacity: 0;
}
</style>